import React, { Component } from 'react';
//引入antd
import { Form, Input, Checkbox, Button, Row, Col } from 'antd';

class Register extends Component {
  state = {
    confirmDirty: false,
    autoCompleteResult: []
  };
  //提交事件
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const data = JSON.stringify(values);
        window.sessionStorage.setItem('user', data);
        const { history } = this.props;
        alert('注册成功');
        history.replace('/login', values);
      }
    });
  };

  handleConfirmBlur = e => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  compareToFirstPassword = (rule, value, callback) => {
    console.log(rule);
    const { form } = this.props;
    if (value && value !== form.getFieldValue('password')) {
      callback('您输入的与上不同，请从新输入密码!');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    console.log(rule);
    const { form } = this.props;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  handleWebsiteChange = value => {
    let autoCompleteResult;
    if (!value) {
      autoCompleteResult = [];
    } else {
      autoCompleteResult = ['.com', '.org', '.net'].map(
        domain => `${value}${domain}`
      );
    }
    this.setState({ autoCompleteResult });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };

    return (
      <Row>
        <Col span={18} offset={3}>
          <Form
            {...formItemLayout}
            autoComplete="off"
            onSubmit={this.handleSubmit}
          >
            <Form.Item>
              {getFieldDecorator('email', {
                rules: [
                  {
                    type: 'email',
                    message: '您输入的格式不对，请输入正确的格式!'
                  },
                  {
                    required: true,
                    message: '请输入邮箱!'
                  }
                ]
              })(<Input placeholder="请输入邮箱" />)}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '请输入密码!'
                  },
                  {
                    validator: this.validateToNextPassword
                  }
                ]
              })(<Input.Password placeholder="请输入密码" />)}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('confirm', {
                rules: [
                  {
                    required: true,
                    message: '请确认密码!'
                  },
                  {
                    validator: this.compareToFirstPassword
                  }
                ]
              })(
                <Input.Password
                  placeholder="请确认密码"
                  onBlur={this.handleConfirmBlur}
                />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: '请输入用户名!',
                    whitespace: true
                  }
                ]
              })(<Input placeholder="请输入用户名" />)}
            </Form.Item>

            <Form.Item>
              {getFieldDecorator('agreement', {
                valuePropName: 'checked'
              })(<Checkbox>请同意协议</Checkbox>)}
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                注册
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    );
  }
}
const RegistrationForm = Form.create({ name: 'register' })(Register);
export default RegistrationForm;
